<template>
  <div class="container">
    <statistics-header header-title="入 境 人 员 数 据 库"></statistics-header>
    <statistics-bar @getType="getType"
                    bar-type="immigration"
                    ref="statisticsBar"></statistics-bar>
    <div class="report-content">
      <div class="search-group">
        <div class="left-content">
          <div class="data-title">数据库信息</div>
          <dlq-search @search="search"
                      search-more="searchMore"
                      :area-name="areaName"></dlq-search>
        </div>
        <!--<div class="record-num"><span style="color: red;">{{totalnum}}</span>条数据</div>-->
      </div>
      <Row class="main-table">
        <vxe-toolbar export
                     custom></vxe-toolbar>
        <vxe-table border
                   resizable
                   highlight-hover-row
                   height="700"
                   size="medium"
                   show-overflow="tooltip"
                   :loading="tableLoading"
                   align="center"
                   header-align="center"
                   :sort-config="{trigger: 'cell'}"
                   :data="tableData"
                   :checkbox-config="{checkField: 'checked'}"
                   @cell-click="cellClickEvent">
          <vxe-table-column type="seq"
                            title="序号"
                            width="60"></vxe-table-column>
          <vxe-table-column :field="item.key"
                            :title="item.title"
                            :width="item.width"
                            :visible="item.visible"
                            v-for="(item,index) in tableColumns"
                            :key="index">
          </vxe-table-column>
          <!--                    <vxe-table-column field="place_type_name" title="场所类别" width="150"></vxe-table-column>-->
        </vxe-table>
      </Row>
      <!-- 入沈人员对话框开始 -->
      <Modal v-model="disposalModal"
             title="来沈航班"
             @on-ok="disposalModalOk"
             @on-cancel="disposalModal = false">
        <Table :columns="flight"
               :data="flightMap"></Table>
      </Modal>
      <!-- 入沈人员对话框结束 -->
      <br>
      <Row type="flex"
           justify="center">
        <Page show-sizer
              :current="pageObj.pageNo"
              :page-size="pageObj.pageSize"
              :total="pageObj.totalRecord"
              @on-change="getPageNo"
              :page-size-opts="[10,20,50,200]"
              @on-page-size-change="pageSizeChange" />
      </Row>
    </div>
  </div>
</template>
<script>
import {
  findrjryList, selectFindCount
} from '@/api/statistics-data-list'
import areaJSON from '@/libs/area'
import StatisticsHeader from '@/components/statistics-header'
import StatisticsBar from '@/components/statistics-bar'
import DlqSearch from '@/components/search'
export default {
  components: { StatisticsBar, StatisticsHeader, DlqSearch },
  data () {
    return {
      disposalModal: false, // 入沈人员处置对话框显示或隐藏
      disposal: '', // 入沈人员处置数据
      county: '',
      type: '',
      country_list: [],
      drawer: false,
      areaName: '',
      totalnum: 0,
      typeNumObj: [
      ],
      pageObj: {
        pageNo: 1,
        pageSize: 50,
        totalRecord: 0
      },
      tableLoading: false,
      tableColumns: [
        {
          title: '姓名',
          width: 150,
          tooltip: true,
          key: 'name',
          align: 'center'
        },
        {
          title: '身份证号码',
          width: 260,
          tooltip: true,
          key: 'card_no',
          align: 'center',
          visible: false
        },
        {
          title: '护照号',
          width: 200,
          tooltip: true,
          key: 'passport_no',
          align: 'center',
          visible: false
        },
        {
          title: '国籍',
          key: 'national',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '性别',
          width: 70,
          tooltip: true,
          key: 'sex',
          align: 'center',
          visible: false
        },
        {
          title: '年龄',
          width: 70,
          tooltip: true,
          key: 'age',
          align: 'center',
          visible: false
        },
        {
          title: '联系电话',
          width: 140,
          tooltip: true,
          key: 'contact_number',
          align: 'center',
          visible: false
        },
        {
          title: '户籍地区',
          key: 'h_area',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '户籍地址',
          width: 300,
          tooltip: true,
          key: 'h_address',
          align: 'center',
          visible: false
        },
        {
          title: '来源国',
          key: 'source_country',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: '入境口岸',
          key: 'in_port',
          tooltip: true,
          width: 140,
          align: 'center'
        },
        {
          title: '入境时间',
          key: 'in_time',
          tooltip: true,
          width: 150,
          align: 'center'
        },
        {
          title: '目标城市',
          key: 'dist_city',
          tooltip: true,
          width: 140,
          align: 'center',
          visible: false
        },
        {
          title: '入沈时间',
          key: 'in_sy_time',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '入沈事由',
          key: 'in_reason',
          tooltip: true,
          width: 200,
          align: 'center',
          visible: false
        },
        {
          title: '所属区县',
          key: 'county',
          tooltip: true,
          width: 150,
          align: 'center'
        },
        {
          title: '所属街道',
          key: 'street',
          tooltip: true,
          width: 140,
          align: 'center',
          visible: false
        },
        {
          title: '所属社区',
          key: 'community',
          tooltip: true,
          width: 140,
          align: 'center',
          visible: false
        },
        {
          title: '居住地址',
          key: 'leave_address',
          tooltip: true,
          width: 340,
          align: 'center'
        },
        {
          title: '人员状态',
          key: 'person_state',
          tooltip: true,
          width: 140,
          align: 'center',
          visible: false
        },
        {
          title: '来沈方式',
          key: 'in_sy_mode',
          tooltip: true,
          width: 150,
          align: 'center'
        },
        {
          title: '来沈航班(车次)',
          key: 'in_sy_code',
          tooltip: true,
          width: 150,
          align: 'center'
        },
        {
          title: '飞机、火车座位号',
          key: 'in_sy_seat',
          tooltip: true,
          width: 260,
          align: 'center'
        },
        {
          title: '来沈前经过地类型',
          key: 'before_pass_type',
          tooltip: true,
          width: 140,
          align: 'center',
          visible: false
        },
        {
          title: '途径国',
          key: 'before_pass_country',
          tooltip: true,
          width: 200,
          align: 'center',
          visible: false
        },
        {
          title: '途径省',
          key: 'before_pass_province',
          tooltip: true,
          width: 140,
          align: 'center',
          visible: false
        },
        {
          title: '途经城市',
          key: 'before_pass_city',
          tooltip: true,
          width: 140,
          align: 'center',
          visible: false
        },
        {
          title: '同行人员',
          key: 'partner',
          tooltip: true,
          width: 120,
          align: 'center',
          visible: false
        },
        {
          title: '起飞时间',
          key: 'take_time',
          tooltip: true,
          width: 120,
          align: 'center',
          visible: false
        },
        {
          title: '来沈前行程',
          key: 'before_trip',
          tooltip: true,
          width: 260,
          align: 'center',
          visible: false
        },
        {
          title: '来源国疫区情况',
          key: 'affected_area',
          tooltip: true,
          width: 140,
          align: 'center',
          visible: false
        },
        {
          title: '入沈后处置',
          key: 'disposal',
          tooltip: true,
          width: 140,
          align: 'center',
          visible: false
        }
      ],
      tableData: [],
      flightMap: [],
      areaList: areaJSON,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      flight: [
        {
          title: '国家',
          key: 'source_country'
        },
        {
          title: '航空公司',
          key: 'hangkongName'
        },
        {
          title: '机型',
          key: 'zx'
        },
        {
          title: '乘客数',
          key: 'number'
        }
      ]
    }
  },
  computed: {},
  mounted () {
    // this.init()
    if (this.$route.query && this.$route.query.areaName) {
      this.areaName = this.$route.query.areaName
      this.$refs.statisticsBar.immigrationAction(this.$route.query.areaName)
    } else if (this.$route.query && this.$route.query.type) {
      this.type = this.$route.query.type
      this.init()
    } else {
      this.init()
    }
  },
  methods: {
    cellClickEvent (e) {
      selectFindCount({ in_sy_code: e.row.in_sy_code }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.flightMap = data.data
        } else {
          this.error(data)
        }
      })
      this.disposalModal = true // 填写入沈人员处置
    },
    // 入沈人员处置提交
    disposalModalOk () {
      alert(this.disposal)
      this.disposalModal = false
      this.disposal = ''
    },
    drawerSearch () {
      console.log(this.follo_up_state)
      this.init({ follo_up_state: this.follo_up_state.toString() })
    },
    search (value) {
      console.log(value, '888')
      this.pageObj.pageNo = 1
      this.$refs.statisticsBar.immigrationAction(value.county)
      if (value.county === '全市') {
        this.county = ''
      } else {
        console.log()
        this.county = value.county
      }
      this.init(value)
      if (value.searchMore === 'searchMore') {
        console.log('1111')
        this.drawer = true
      }
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchAction () { },
    getType (object) {
      this.type = object.type
      this.pageObj.pageNo = 1
      this.init()
    },
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        // place_type: this.$common.xeUtils.trim(this.searchObj.place_type),
        ...data
      }
      if (this.county) obj.county = this.county
      if (this.type) obj.country_list = this.type
      this.tableLoading = true
      findrjryList(obj).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.pageObj.totalRecord = data.data.totalRecord
          this.totalnum = data.data.totalRecord
          // for (let i = 0; i < data.data.results.length; i++) {
          // data.data.results[i].samplingDate = this.getDate(data.data.results[i].sampling_date)
          // data.data.results[i].imp_date = this.getDate(data.data.results[i].imp_date)
          // }
          this.tableData = data.data.results
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    // 转换年月日方法
    getDate (str) {
      var oDate = new Date(str)
      var oYear = oDate.getFullYear()
      var oMonth = oDate.getMonth() + 1
      var oDay = oDate.getDate()
      // var oHour = oDate.getHours()
      // var oMin = oDate.getMinutes()
      // var oSec = oDate.getSeconds()
      var oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
      // + ' ' + this.getzf(oHour) + ':' + this.getzf(oMin) + ':' + this.getzf(oSec)// 最后拼接时间
      return oTime
    },
    // 补0操作
    getzf (num) {
      if (parseInt(num) < 10) {
        num = '0' + num
      }
      return num
    }
  }
}
</script>

<style scoped type="less">
.container {
  margin-bottom: 50px;
}
.report-content {
  padding: 0 10px;
  height: auto;
}
.county-group {
  display: flex;
  align-items: center;
}
.search-group {
  /*padding: 10px 0;*/
  /*border-bottom: 1px solid #efefef;*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.left-content {
  display: flex;
  align-items: center;
  z-index: 2;
}
.data-title {
  border-left: 6px solid darkred;
  padding-left: 7px;
  margin-right: 20px;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.sub-title {
  /*border-left: 7px solid darkred;*/
  font-size: 18px;
  font-weight: 700;
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
}
.sub-title span {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  margin: 0 3px;
}
.precent-group {
  display: flex;
  align-items: center;
}
.precent-group > .item {
  width: 180px;
  padding: 0 10px;
}
.precent-group > .item > .text {
  width: 100%;
}
.demo-drawer-footer {
  margin-top: 20px;
}
.inner-frame > .ivu-row {
  margin-bottom: 10px;
}
.ivu-form-item {
  margin-bottom: 10px;
}
.ivu-col.ivu-col-span-6 {
  width: 20%;
}
.record-num {
  margin-right: 140px;
}
.main-table {
  margin-top: -45px;
}
.tt {
  display: flex;
  align-items: center;
  padding-top: 10px;
}
.ivu-checkbox-border {
  margin-bottom: 10px;
}
</style>
